<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="/assets/css/layui.css" media="all">

</head>
<body style="padding:20px 100px 0 100px">

<div class="layui-btn-group demoTable">
    <button class="layui-btn layui-btn-normal" data-type="addData"><i class="layui-icon">&#xe608;</i>新增权限</button>
    <button class="layui-btn layui-btn-danger" data-type="deleteData"><i class="layui-icon">&#xe640;</i>批量删除</button>
</div>
<table class="layui-table" lay-data="{url:'/permission/getPermissionListForPage', page:true, id:'role',limit:10}" lay-filter="test">
    <thead>
    <tr>
        <th lay-data="{checkbox:true, fixed: true}"></th>
        <th lay-data="{field:'id', width:100}">ID</th>
        <th lay-data="{field:'name', width:200}">权限名称</th>
        <th lay-data="{field:'type', width:200}">权限类型</th>
        <th lay-data="{field:'url', width:300}">权限地址</th>
        <th lay-data="{field:'availableVo', width:150}">是否可用</th>
        <th lay-data="{fixed: 'right', width:640, align:'center', toolbar: '#barDemo'}"></th>
    </tr>
    </thead>
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-mini" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>

<script src="/assets/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });

        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'detail'){ //查看
                //do somehing
                window.location.href="/user/getUserInfoList";
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除当前行的数据吗？', function(index){
                    $.ajax({
                        type : "POST",  //提交方式
                        url : "/permission/deletePermission",//路径
                        data : {
                            id:data.id
                        },//数据，这里使用的是Json格式进行传输
                        success : function(result) {//返回数据根据结果进行相应的处理
                            var state = result.status;
                            if(state=="0"){
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                            }else{
                                layer.alert("删除失败!请重试");
                            }
                        }
                    });
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                toUpdate(data.id);
            }
        });


        var $ = layui.$, active = {
            addData: function(){ //新增权限
                var index = layer.open({
                    type: 2,
                    shift: 1,
                    content: '/permission/toPermissionAdd',
                    shade: [0.8, '#393D49'],
                    area: ['550px', '70%'],
                    maxmin: true,
                    end: function () {   //刷新父页面
                        location.reload();
                    }
                });
            },
            deleteData: function(){ //新增权限
                //询问框
                layer.confirm('您是确定要全部删除吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    var checkStatus = table.checkStatus('role')
                        ,data = checkStatus.data;
                    var jdata = JSON.stringify(data);
                    if(jdata=="[]"){
                        layer.alert("请选择要删除的行!");
                        return;
                    }
                    var id_arr = [];
                    for(var i=0;i<data.length;i++){
                        id_arr.push(data[i].id);
                    }
                    $.ajax({
                        type : "POST",  //提交方式
                        url : "/permission/deleteAllPermission",//路径
                        data : {
                            ids:id_arr
                        },//数据，这里使用的是Json格式进行传输
                        success : function(result) {//返回数据根据结果进行相应的处理
                            var state = result.status;
                            if(state=="0"){
                                var index = parent.layer.getFrameIndex(window.name);   //关闭弹出层
                                parent.layer.close(index);
                                location.reload();
                                layer.alert("删除成功!");
                            }else{
                                layer.alert("删除失败!请重试");
                            }
                        }
                    });
                }, function(){
                    layer.msg('取消操作', {icon: 1});
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        function toUpdate(id) {
            var index = layer.open({
                type: 2,
                shift: 1,
                content: '/permission/findPermissionById?id='+id,
                shade: [0.8, '#393D49'],
                area: ['550px', '70%'],
                maxmin: true,
                end: function () {   //刷新父页面
                    location.reload();
                }
            });
        }
    });
</script>
</body>
</html>
